<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas-Demo</title>
    <link rel="stylesheet" href="canvas-demo.css">
</head>
<body>
<h1 style="text-align: center">Canvas- demo</h1>
<div class="container">
    <div class="sub-container">
        <h2> demo1 canvas 100*100 和 200*200 画布,缩放在200*200 的效果图</h2>
        <canvas id="one_canvas" class="one_canvas">您的浏览器不支持canvas</canvas>
        <canvas id="one_canvas2" class="one_canvas">您的浏览器不支持Canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo2 画图形</h2>
        <canvas id="two_canvas" width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo3 填充图形</h2>
        <canvas id="three_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo4 坐标轴的平移与旋转</h2>
        <canvas id="four_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo5 线性渐变与径向渐变</h2>
        <canvas id="five_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo6 填充文本</h2>
        <canvas id="six_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo7 绘制图像</h2>
        <canvas id="seven_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo8 阴影</h2>
        <canvas id="eight_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo9 区域剪辑,红色1/4圆是矩形和圆相交的区域</h2>
        <canvas id="nine_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo10 绘制贝塞尔曲线+其它曲线</h2>
        <canvas id="ten_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo11 定时清空矩形,绘制矩形</h2>
        <canvas id="eleven_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>
    <div class="sub-container">
        <h2>demo12 使用离屏技术</h2>
        <canvas id="twelve_canvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
        <canvas id="twelve_offCanvas"  width="600px" height="400px">您的浏览器不支持canvas</canvas>
    </div>



</div>
<script src="canvas-demo.js"></script>
</body>
</html>